<template>
    <div class="global_style control-box">
        <ModuleBg :base="base" bgColor="#eee"/>
        <ul class="right-nav">
            <el-tooltip effect="dark" content="撤销" placement="right"><li class="iconfont icona-bianzu42beifen72x" @click.stop="revoke" :class="{'active': historyModule.length > 1 && this.historyModule.length != Math.abs(this.historyIndex) }"></li></el-tooltip>
            <el-tooltip effect="dark" content="恢复" placement="right"><li class="iconfont icona-bianzu42beifen62x" @click.stop="recover" :class="{'active': historyIndex < -1 }"></li></el-tooltip>
            <el-tooltip effect="dark" content="风格" placement="right"><li class="iconfont icona-bianzu44beifen32x" @click.stop="moduleClick"></li></el-tooltip>
        </ul>
        <div class="support" v-if="item.support" @click.stop="moduleClick">
            <p>技术支持</p>
        </div>
    </div>
</template>

<script>
import props from '@/mixin/props.js'
import { mapState } from 'vuex'
export default {
    props:{
        item: {
            type: Object
        }
    },
    mixins:[ props ],
    computed: {
        ...mapState(['historyModule', 'historyIndex'])
    },
    data() {
        return {
        }
    },
    methods: {
        moduleClick(){
            this.$store.dispatch('pushAttr',this.item)   // 存入需要编辑的属性
            this.$store.commit('toggleAttr', true)  // 打开属性面板
        },
        revoke(){
            // 撤销
            if(this.historyModule.length > 1 && this.historyModule.length != Math.abs(this.historyIndex)){
                this.$store.commit('changeHistory', true)
            }
        },
        recover(){
            // 恢复
            if(this.historyIndex < -1){
                this.$store.commit('changeHistory', false)
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.global_style{position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 1;
    .right-nav{position: absolute;right: -80px;top: 50%;
        li{width: 40px;height: 40px;background: #71b4f9;cursor: pointer;color: #fff;border-radius: 3px;transition: all .3s;margin-bottom: 8px;display: flex;align-items: center;justify-content: center;font-size: 18px;
            &.iconfont:hover{background: #409eff;}
            &:nth-child(1){opacity: .5;
                &.active{opacity: 1;}
            }
            &:nth-child(2){opacity: .5;
                &.active{opacity: 1;}
            }
        }
    }
    .support{position: absolute;bottom: -64px;z-index: 10;font-size: 14px;color: #C0C3CD;line-height: 20px;text-align: center;background: #fff;left: 0;right: 0;padding: 20px 0;border-top: 1px solid #f5f5f5;
        &:hover{background: #eff8fd;cursor: pointer;}
    }
}
</style>

